<template>
  <div class="toast" v-show="isShow">
    {{message}}
  </div>
</template>

<script>
  export default {
    name: "Mes",
    data () {
      return {
        message: '',
        isShow: false,
      }
    },
    methods: {
      toShow (message='自定义toast插件', showTime=2000) { //
        /**设置默认值*/
        // message = message || '自定义toast插件'
        // showTime = showTime || 2000


        this.isShow = true //更改isShow为true,让这个组件能够显示
        this.message = message //这个组件展示的信息

        setTimeout(() => {
          this.isShow = false //更改isShow为false,让这个组件不显示
          this.message = '' //要显示的信息置为空
        }, showTime ) //
      }
    }

  }
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);

    padding: 15px 15px 15px 20px;
    display: flex;

    z-index: 999;

    width: 380px;
    border-radius: 4px;

    color: #909399;
    align-items: center;

    background-color: #edf2fc;
    border: 1px solid #ebeef5;
  }
</style>
